<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>广州人口迁徙</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.css">
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .hmap-control-zoom {
      right: 30px;
    }
  </style>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/npm/hmap-js/dist/hmap.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol3-echarts/dist/ol3Echarts.js"></script>
<!--<script src="../../../dist/ol3Echarts.js"></script>-->
<script>
  var Maps = new HMap('map', {
    controls: {
      loading: true,
      zoomSlider: true,
      fullScreen: false
    },
    view: {
      center: [113.48639681199214, 23.31897543042969],
      projection: 'EPSG:4326',
      zoom: 10, // resolution
    },
    baseLayers: [
      {
        layerName: 'vector',
        isDefault: true,
        layerType: 'TileXYZ',
        projection: 'EPSG:3857',
        tileGrid: {
          tileSize: 256,
          extent: [-2.0037507067161843E7, -3.0240971958386254E7, 2.0037507067161843E7, 3.0240971958386205E7],
          origin: [-2.0037508342787E7, 2.0037508342787E7],
          resolutions: [
            156543.03392800014,
            78271.51696399994,
            39135.75848200009,
            19567.87924099992,
            9783.93962049996,
            4891.96981024998,
            2445.98490512499,
            1222.992452562495,
            611.4962262813797,
            305.74811314055756,
            152.87405657041106,
            76.43702828507324,
            38.21851414253662,
            19.10925707126831,
            9.554628535634155,
            4.77731426794937,
            2.388657133974685
          ]
        },
        layerUrl: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
      }
    ]
  });
  var echartslayer = new ol3Echarts(getOptions());
  echartslayer.appendTo(Maps.getMap());
  function getOptions () {
    var GZ_DATA_GEO_CoordMap = {
      '天河区': [113.368672,23.130389],
      '黄埔区': [113.466408,23.111777],
      '海珠区': [113.323254,23.089173],
      '越秀区': [113.272949,23.135441],
      '荔湾区': [113.250815,23.131453],
      '白云区': [113.278986,23.164151],
      '南沙区': [113.530511,22.808027],
      '花都区': [113.225806,23.412711],
      '增城区': [113.817106,23.267509],
      '从化区': [113.593464,23.555101],
      '番禺区': [113.391669,22.943615]
    }
    var ZCData = [
      [{name:'增城区'}, {name:'番禺区',value:95}],
      [{name:'增城区'}, {name:'从化区',value:90}],
      [{name:'增城区'}, {name:'天河区',value:80}],
      [{name:'增城区'}, {name:'花都区',value:70}],
      [{name:'增城区'}, {name:'南沙区',value:60}],
      [{name:'增城区'}, {name:'白云区',value:50}],
      [{name:'增城区'}, {name:'荔湾区',value:40}],
      [{name:'增城区'}, {name:'越秀区',value:30}],
      [{name:'增城区'}, {name:'海珠区',value:20}],
      [{name:'增城区'}, {name:'增城区',value:10}],
      [{name:'增城区'}, {name:'黄埔区',value:10}]
    ];
    var NSData = [
      [{name:'南沙区'},{name:'黄埔区',value:95}],
      [{name:'南沙区'},{name:'海珠区',value:90}],
      [{name:'南沙区'},{name:'越秀区',value:80}],
      [{name:'南沙区'},{name:'荔湾区',value:70}],
      [{name:'南沙区'},{name:'天河区',value:60}],
      [{name:'南沙区'},{name:'白云区',value:50}],
      [{name:'南沙区'},{name:'花都区',value:40}],
      [{name:'南沙区'},{name:'增城区',value:30}],
      [{name:'南沙区'},{name:'从化区',value:20}],
      [{name:'南沙区'},{name:'番禺区',value:10}]
    ];
    var HZData = [
      [{name:'海珠区'},{name:'黄埔区',value:95}],
      [{name:'海珠区'},{name:'白云区',value:90}],
      [{name:'海珠区'},{name:'越秀区',value:80}],
      [{name:'海珠区'},{name:'荔湾区',value:70}],
      [{name:'海珠区'},{name:'天河区',value:60}],
      [{name:'海珠区'},{name:'南沙区',value:50}],
      [{name:'海珠区'},{name:'花都区',value:40}],
      [{name:'海珠区'},{name:'增城区',value:30}],
      [{name:'海珠区'},{name:'从化区',value:20}],
      [{name:'海珠区'},{name:'番禺区',value:10}]
    ];
    var CHData = [
      [{name:'从化区'},{name:'黄埔区',value:95}],
      [{name:'从化区'},{name:'白云区',value:90}],
      [{name:'从化区'},{name:'越秀区',value:80}],
      [{name:'从化区'},{name:'荔湾区',value:70}],
      [{name:'从化区'},{name:'天河区',value:60}],
      [{name:'从化区'},{name:'南沙区',value:50}],
      [{name:'从化区'},{name:'花都区',value:40}],
      [{name:'从化区'},{name:'增城区',value:30}],
      [{name:'从化区'},{name:'海珠区',value:20}],
      [{name:'从化区'},{name:'番禺区',value:10}]
    ];
    var HDData = [
      [{name:'花都区'},{name:'黄埔区',value:95}],
      [{name:'花都区'},{name:'白云区',value:90}],
      [{name:'花都区'},{name:'越秀区',value:80}],
      [{name:'花都区'},{name:'荔湾区',value:70}],
      [{name:'花都区'},{name:'天河区',value:60}],
      [{name:'花都区'},{name:'南沙区',value:50}],
      [{name:'花都区'},{name:'从化区',value:40}],
      [{name:'花都区'},{name:'增城区',value:30}],
      [{name:'花都区'},{name:'海珠区',value:20}],
      [{name:'花都区'},{name:'番禺区',value:10}]
    ];
    var convertData_gz = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = GZ_DATA_GEO_CoordMap[dataItem[0].name];
        var toCoord = GZ_DATA_GEO_CoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            fromValue : dataItem[1].value,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord]
          });
        }
      }
      return res;
    };
    var color = ['#a6c84c', '#ffa022', '#46bee9','#ff3399','#D15FEE'];
    var series = [];
    [['增城区', ZCData], ['南沙区', NSData], ['海珠区', HZData],['从化区', CHData],['花都区', HDData]].forEach(function (item, i) {
      series.push(
        {
          name: item[0],
          type: 'lines',
          zlevel: 1,
          effect: {
            show : true,
            period : 6,
            trailLength : 0.7,
            color : '#fff',
            symbolSize : 3,
            shadowBlur : 4.4
          },
          lineStyle: {
            normal: {
              color: color[i],
              width: 0,
              curveness: 0.2
            }
          },
          data: convertData_gz(item[1])
        },
        {
          name: item[0],
          type: 'lines',
          zlevel: 2,
          symbol: ['none', 'arrow'],
          symbolSize: 10,
          effect: {
            show: true,
            period: 6,
            trailLength: 0,
            //symbol: planePath_gz,
            symbolSize: 6
          },
          lineStyle: {
            normal: {
              color: color[i],
              width: 1,
              opacity: 0.5,
              curveness: 0.2
            }
          },
          data: convertData_gz(item[1])
        },
        {
          name: item[0],
          type: 'effectScatter',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: (i == 0 ? true : false),
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: function (val) {
            return val[2] / 10;
          },
          itemStyle: {
            normal: {
              color: color[i]
            }
          },
          data: item[1].map(function (dataItem) {
            return {
              name: dataItem[1].name,
              value: GZ_DATA_GEO_CoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
          })
        });
    });
    return {
      tooltip: {
        trigger: 'item',
          formatter: function (params) {
          if (params.data.fromName) {
            return params.data.fromName + " > " + params.data.toName + " <br/>流量数 : " + params.data.fromValue;
          }else{
            return params.name + "<br/>流向广州人数：" + params.value[2];
          }
        }
      },
      legend: {
        orient: 'vertical',
          top:'5%',
          left: 'right',
          data:['增城区', '南沙区', '海珠区','从化区','花都区'],
          textStyle: {
          color: '#fff'
        },
        selectedMode: 'mutipla',
          bottom:'50%'
      },
      visualMap: {
        min: 0,
          max: 100,
          calculable: true,
          inRange: {
          color: ['#50a3ba', '#eac736', '#d94e5d']
        },
        textStyle: {
          color: '#fff'
        },
        bottom:"10%"
      },
      series : series
    };
  }
</script>
</body>
</html>
